<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花样滑冰</title>
    <style>

* {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100vh;
            padding: 0 24%;
            background: #f7f7f7;
            overflow-y: hidden;
        }

        .container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow-y: hidden;
            background: #4291a7;
        }

        .banner {
            position: relative;
            width: 100%;
            height: 25%;
            background: pink;
        }

        .banner-img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        .img-select {
            display: block;
        }

        .dots {
            position: absolute;
            display: flex;
            bottom: 20px;
            right: 20px;
            width: 120px;
            height: 16px;
            list-style: none;
            gap: 10px;
        }

        .dot {
            width: 14px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            border-radius: 50%;
            background: #fff;
            color: #000;
            text-align: center;
            cursor: pointer;
        }

        .dot-select {
            background: red;
        }

        .logo {
            box-sizing:border-box;
            display: flex;
            align-items: center;
            padding: 0 10px;
            width: 100%;
            height: 5%;
        }

        .logo-img {
            height: 80%;
            object-fit: cover;
            margin-right: 10px;
        }

        .logo-name {
            line-height: 100%;
            color: #fff;
        }



        .nav {
            box-sizing: border-box;
            display: flex;
            padding: 0 30px;
            width: 100%;
            height: 4%;
            list-style: none;
            background: #206e85;
            gap: 12px;
        }

        .nav>li {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 10%;
            height: 100%;
            line-height: 100%;

        }

        .nav>li>a {
            color: #fff;
            text-decoration: none;
        }

        main {
            display:flex;
            flex-direction: column;
            box-sizing: border-box;
            flex: 1;
            width: 100%;
            padding: 10px 30px;
            overflow:auto;
        }
        
        .title{
            color:#fff;
            font-size:24px;
            line-height:32px;
            text-align:center;
            font-weight: 700;
        }

       
        .item > .item-title{
            color:#9fbea1;
            font-size:20px;
            line-height:48px;
            text-align:center;
        }
        .item > p {
            color:#fff;
            font-size:14px;
            line-height:24px;
        }
        .photo{
            padding:20px 0;
            width:100%;
            display:flex;
            justify-content: center;
        }

        .photo > img{
            width:30%;
            object-fit:cover;
        }
        

        footer {
            display:flex;
            align-items:center;
            width: 100%;
            height: 5%;
            background: #283043;
        }

        .list {
            display:flex;
            justify-content: space-evenly;
            align-items: center;
            width: 100%;
            /* padding:6px 0; */
            list-style: none;
            gap: 12px;
            font-size:14px;
            color:#fff;
        }
       

        .sections{
            display:grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            flex:1;
            overflow:hidden;
            gap:12px;
        }

        .star{
            float:left;
            display:flex;
            justify-content: space-between;
            height:200px;
            gap:20px;
        }

        .star-left > .name{
            color:#9fbea1;
            font-size:20px;
            line-height:48px;
        }

        .star-left > .content{
            color:#fff;
            text-indent: 2em;
            font-size:14px;
            line-height:22px;
        }

        .star-right > img{
            width:180px;
            /* height:200px; */
            object-fit: cover;
        }


    </style>
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <div class="banner">
                <img class="banner-img img-select" src="./images/img-01.jpg">
                <img class="banner-img" src="./images/img-02.jpg">
                <img class="banner-img" src="./images/img-03-01.png">
                <ul class="dots">
                    <li class="dot dot-select" onClick="changeImg(0)">1</li>
                    <li class="dot" onClick="changeImg(1)">2</li>
                    <li class="dot" onClick="changeImg(2)">3</li>
                </ul>
            </div>
            <div class="logo">
                <img class="logo-img" src="./images/logo.png">
                <span class="logo-name">花样滑冰</span>
            </div>
            <ul class="nav">
                <li>
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <a href="./star.html">明星简介</a>
                </li>
                <li>
                    <a href="#">视频欣赏</a>
                </li>
                <li>
                    <a href="#">运动特点</a>
                </li>
                <li>
                    <a href="./login.html">登录页</a>
                </li>
            </ul>
            <main>
             <div class="title">运动特点</div>
             <div class="item">
                <div class="item-title">比赛规则</div>
                <p>1.单人滑包括男子单人滑与女子单人滑两项，技术动作要素包括跳跃、旋转、接续步、燕式步等。比赛分短节目和自由滑。在短节目中，技术动作要素必须包括跳跃、旋转、接续步。</p>
                <p>2.双人滑：双人滑要求一位男选手和一位女选手配合，在冰上表演同步的单人滑动作，或双人滑特有的动作，如抛跳（男选手抛掷女选手助其跳跃）、托举（男选手将女选手托起后在空中做一系列技术)、双人旋转（两位选手同时绕一个共同轴心旋转）、螺旋线（男选手成为轴心，女选手围绕男选手旋转）等。比赛分短节目和自由滑。</p>
                <p>2.双人滑：双人滑要求一位男选手和一位女选手配合，在冰上表演同步的单人滑动作，或双人滑特有的动作，如抛跳（男选手抛掷女选手助其跳跃）、托举（男选手将女选手托起后在空中做一系列技术)、双人旋转（两位选手同时绕一个共同轴心旋转）、螺旋线（男选手成为轴心，女选手围绕男选手旋转）等。比赛分短节目和自由滑。</p>
                <p>4.团体比赛：将男、女单人滑、双人滑、冰上舞蹈4个小项的分数进行合计，决出排名。</p>
             </div>
             <div class="photo">
                <img src="./images/img-16.jpg">
             </div>
             <div class="item">
                <div class="item-title">比赛装备</div>
                <p>1.冰鞋和冰刀花样滑冰鞋按照脚形制做，要求高腰、高跟、硬帮、硬底，腰高到踝关节以上为好，但太高妨碍小腿肌肉的活动；跟高与鞋大小成比例。花样滑冰刀应和鞋的大小相适应，刀长应是冰刀最下面的刀齿在鞋底前端的边缘处，刀尾超出鞋后跟1.5厘米。刀身下面有半圆弧形的浅槽。花样滑冰的冰刀与普通冰刀最显著的不同在于前端有着“刀齿”。刀齿主要用在跳跃中，不应用在滑行和旋转中。冰刀以螺丝固定在冰鞋的鞋底。冰上舞蹈的冰刀后部比其他项目的要短1英寸，这是为了满足舞蹈对双人近距合作和精细步法的要求。选手穿着冰鞋在冰场外行走时，要在冰刀外套上硬塑料的保护套，这是为了避免冰刀被地面磨钝或沾上灰尘杂质。选手不穿冰鞋时，则用软套保护冰刀，它可以吸收残留的融水，防止冰刀生锈。</p>
                <p>2.服装比赛中，女选手可以穿短裙、长裤或体操服，裙装下穿不透明的肉色紧身裤或长袜，有时会以此来覆盖冰鞋。不得穿上下分开的服装。男选于必须穿长裤，不能穿紧身裤。不得穿露胸无袖上衣和紧身裤。</p>
                <p>3.音乐花样滑冰比赛节目使用的音乐风格迥异、多姿多彩。冰舞节目采用的音乐可以包含人声，但单人滑及双人比赛的节目不能使用带有人声的音乐，但可以有诸如“啊”一类的无意义伴唱或咏叹。</p>
                <p>4.场地 花样滑冰赛场地长60米，宽30米，最小限度长不得少于56米，宽不少于26米，冰的厚度不少于3~5厘米。</p>
             </div>
            </main>

            <footer>
                <ul class="list">
                    <li>邮件反馈</li>
                    <li>企业推广</li>
                    <li>帮助中心</li>
                    <li>版权所有@花样滑冰</li>
                    <li>2024年6月14日</li>
                </ul>
            </footer>
        </div>
    </div>
</body>

<script>
    const dotDoms = document.querySelectorAll('.dot')
    const imgDoms = document.querySelectorAll('.banner-img')
    function changeImg(index) {
        imgDoms.forEach((img, number) => {
            img.classList.remove('img-select')
            if (number === index) {
                img.classList.add('img-select')
            }
        })
        dotDoms.forEach((dot, number) => {
            dot.classList.remove('dot-select')
            if (number === index) {
                dot.classList.add('dot-select')
            }
        })
    }
</script>

</html>